<template>
	<view class="index">
		<view class="top">
			<view class="logo">
				<view class="image"></view>
				<!-- <image src="../../static/并集.png" mode="aspectFit"></image>  -->
			</view>
			<view class="desc">昊虹指尖记账</view>
		</view>
		<view class="middle">
			<form ref="form" @submit="submit()">
				<uni-row class="demo-uni-row" width="730">
					<uni-col :span="2">
						<uni-icons type="contact" size="30"></uni-icons>
					</uni-col>
					<uni-col :span="22">
						<uni-easyinput trim="all" v-model="formData.username" placeholder="请输入账号"></uni-easyinput>
					</uni-col>
				</uni-row>

				<uni-row class="demo-uni-row" width="730">
					<uni-col :span="2">
						<uni-icons type="locked-filled" size="30"></uni-icons>
					</uni-col>
					<uni-col :span="22">
						<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码"></uni-easyinput>
					</uni-col>
				</uni-row>

				<uni-row class="demo-uni-row" width="730">
					<uni-col :span="24">
						<view class="button">
							<button class="button2" form-type="submit">
								<image class="image" src="../../static/2.png" mode=""></image>
							</button>
						</view>
					</uni-col>
				</uni-row>


			</form>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getToken } from '@/utils/auth'
	import { userStore } from '@/store/user'
	import { onMounted, ref } from 'vue'
	import { pageTo } from '@/utils/index';
	import { loginApi } from '@/apis/apis'



	//表单
	const formData = ref({
		username: JSON.parse(uni.getStorageSync('SysUser') || '{}').username,
		password: ''
	});


	//提交表单
	const submit = async () => {

		const res : any = await loginApi.zhuCheUsingPOST(formData.value)

		/* 
		
		{
		  "SysUser": {
			"params": null,
			"id": "1920748794519797762",
			"username": "admin",
			"password": null,
			"salt": null,
			"createTime": "2025-05-09 07:55:07",
			"audit": "已激活",
			"key": null,
			"val": null,
			"type": "and",
			"selfMotion": null
		  },
		  "selfMotion": "1920748794519797762",
		  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTE1MjU4MzIsInVzZXJuYW1lIjoiYWRtaW4ifQ.GScMO_3cI7dYu2BwcJNtPS40HGad2NdbTqX8-Cb_f1k1751522232952"
		}
		 */
		uni.setStorageSync('username', res.data.token)  // 同步存储
		uni.setStorageSync('token', res.data.token)  // 同步存储
		res.data.SysUser.selfMotion = res.data.selfMotion
		uni.setStorageSync('SysUser', JSON.stringify(res.data.SysUser))  // 同步存储
		userStore.setSysUser(res.data.SysUser)

		toIndex()
	}

	const toIndex = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
	//
	const toast = (title : string) => {
		uni.showToast({
			title
		});
	}
	console.log(userStore.SysUser);
</script>

<style lang="scss" scoped>
	.index {
		background: linear-gradient(180deg, rgba(255, 250, 235, 1) 0%, rgba(227, 255, 224, 0) 40%, #ffffff 100%);

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-top: 80px;

			.logo {
				.image {
					width: 120px;
					height: 120px;
					background-color: #c9c6cf;
				}
			}

			.desc {
				margin-top: 20px;
				font-size: 20px;
			}
		}

		.middle {
			padding: 16px;
			margin-top: 20px;



			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40px;

				.button2 {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 16px;
					background-image: linear-gradient(-45deg, #544cff, #da38ff 90%);
					border-radius: 100px;

					.image {
						width: 40px;
						height: 40px;
					}
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			position: fixed;
			bottom: 60px;

			.list {
				display: flex;
				justify-content: center;
				align-items: center;

				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 12px;
					padding-bottom: 12px;
					padding-right: 24px;
					padding-left: 24px;
					margin: 4px;
					border-radius: 10px;
					background-color: transparent;
					border: 1px solid #f2f2f2;


				}

				.item::after {
					border: none;
				}
			}
		}
	}

	.demo-uni-row {
		height: 30px;
		margin-bottom: 20px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */

		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */

		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}
</style>